<template>
  <div class="appeal mg-0">
    <div class="appealItem">
      <p class="font-30 fontW-9 theme-color mgt-10">{{$t('set_appeal.imgTitle')}}</p>
      <div class="itemContent_bg">
        <div class="border-r itemContent_bg_img" >
          <img :src="picture" alt="" v-if="picture">
          <upload :maxsize="maxsize" @getImgUrl="getImgUrl" v-else/>
        </div>
        <p class="fontW-b font-18  color-d6 mgt-5">
          <span>{{$t('set_user.imgRecommend')}} 800px × 800px</span>
          <span class="mgl-30">{{$t('set_user.maxSize')}}size: {{maxsize}}MB</span>
        </p>
      </div>
      <p class="font-30 fontW-9 theme-color mgt-30">{{$t('set_appeal.content')}}
      </p>
      <div class="bg-5d border-r boxS-i-4">
        <el-input
          type="textarea"
          rows="10"
          v-model="desc"
          maxlength="76"
          show-word-limit/>
      </div>
      <p class="font-30 fontW-9 theme-color mgt-30">{{$t('set_appeal.appealLink')}}</p>
      <div class="appealLink bg-5d border-r boxS-i-4 h-37">
        <div class="appealLinkitem flex-1"><input class="color-d6 font-18 pdlr-10" v-model="urlLink" type="text"></div>
      </div>
      <div class="appealaddressandemail">
        <div class="item flex-1">
          <p class="font-30 fontW-9 theme-color mgt-30">{{$t('set_appeal.appealAddress')}}</p>
          <div class="copyAddress">
            <div class="email bg-5d border-r boxS-i-4 mgt-10">
              <div class="emailinput flex-1"><input class="color-d6 font-18 pdlr-10" v-model="urlAddress" type="text"></div>
            </div>
          </div>
        </div>
        <div class="item flex-1">
          <p class="font-30 fontW-9 theme-color mgt-30">{{$t('set_appeal.backEmail')}}</p>
          <div class="copyAddress">
            <div class="email bg-5d border-r boxS-i-4 mgt-10">
              <div class="emailicon"><img src="../../assets/chat/email.svg" alt=""></div>
              <div class="emailinput flex-1"><input class="color-d6 font-18" v-model="emailAddress" type="text"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="mgt-30">
        <div class="save bg-theme border-r font-20 fontW-7 text-c box-4" @click="getUserAppeal">{{$t('btn.submit')}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Upload from './Upload'
import { RegularEmail, RegularLink, RegularAddrees, MessagePormpt } from '../../Js/common'
export default {
  components: {
    Upload
  },
  data () {
    return {
      UploadWidth: 20,
      uploadHeight: 80,
      marginNum: 2,
      maxsize: 5,
      desc: '',
      urlLink: '',
      urlAddress: '',
      emailAddress: '',
      picture: '',
      account: '',
      bankNum: '',
      twitterNum: '',
      facebookNum: '',
      instagramNum: '',
      discordNum: '',
      redditNum: '',
      youtubeNum: '',
      wechatNum: '',
      sendNum: '',
      langType: localStorage.getItem('language')
    }
  },
  methods: {
    getImgUrl: function (file) {
      this.$loading.show()
      let data = new FormData()
      data.append('file', file.file)
      const params = {
        data,
        headers: {
          'content-type': 'multipart/form-data'
        }
      }
      this.$Api.Index.UploadFile(params, data)
        .then(res => {
          this.$loading.hide()
          if (res && res.code === 200) {
            this.picture = `http://api.imeetnft.io/${res.data}`
            let langObj = {
              zh_cn: '上传成功',
              en: 'Uploaded successfully',
              ru: 'Загружено успешно',
              zh_tw: '上載成功'
            }
            MessagePormpt(this.langType, langObj)
          } else {
            let langObj = {
              zh_cn: '上传不通过',
              en: 'upload failed',
              ru: 'Не удалось загрузить',
              zh_tw: '上載不通過'
            }
            MessagePormpt(this.langType, langObj)
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, JSON.stringify(err))
        })
    },
    getUserAppeal: function () {
      let regEmail = RegularEmail(this.emailAddress)
      let regLink = RegularLink(this.urlLink)
      let regAdd = RegularAddrees(this.urlAddress)
      if (this.picture === '') {
        let langObj = {
          zh_cn: '请上传图片说明',
          en: 'Please upload image description',
          ru: 'Загрузите описание изображения.',
          zh_tw: '請上載圖片說明'
        }
        MessagePormpt(this.langType, langObj)
        return
      }
      if (this.desc === '') {
        let langObj = {
          zh_cn: '请填写申诉说明',
          en: 'Please fill in the complaint description',
          ru: 'Заполните описание жалобы',
          zh_tw: '請填寫申訴說明'
        }
        MessagePormpt(this.langType, langObj)
        return
      }
      if (this.urlLink === '') {
        let langObj = {
          zh_cn: '链接地址不能为空',
          en: 'Link address cannot be empty',
          ru: 'Адрес ссылки не может быть пустым',
          zh_tw: '鏈接地址不能為空'
        }
        MessagePormpt(this.langType, langObj)
        return
      } else {
        if (regLink === false) {
          let langObj = {
            zh_cn: '链接地址格式不正确',
            en: 'link address is incorrect',
            ru: 'адрес ссылки указан неверно',
            zh_tw: '鏈接地址不正確'
          }
          MessagePormpt(this.langType, langObj)
          return
        }
      }
      if (this.urlAddress === '') {
        let langObj = {
          zh_cn: '钱包地址不能为空',
          en: 'Wallet address cannot be empty',
          ru: 'Адрес кошелька не может быть пустым',
          zh_tw: '錢包地址不能為空'
        }
        MessagePormpt(this.langType, langObj)
        return
      } else {
        if (regAdd === false) {
          let langObj = {
            zh_cn: '钱包地址不正确',
            en: 'link address is incorrect',
            ru: 'адрес ссылки указан неверно',
            zh_tw: '錢包地址格式不正確'
          }
          MessagePormpt(this.langType, langObj)
          return
        }
      }
      if (this.emailAddress === '') {
        let langObj = {
          zh_cn: '邮箱地址不能为空',
          en: 'Email address cannot be empty',
          ru: 'Адрес электронной почты не может быть пустым',
          zh_tw: '郵箱地址不能為空'
        }
        MessagePormpt(this.langType, langObj)
        return
      } else {
        if (regEmail === false) {
          let langObj = {
            zh_cn: '邮箱地址格式不正确',
            en: 'Email address is incorrect',
            ru: 'Адрес электронной почты указан неправильно',
            zh_tw: '郵箱地址不正確'
          }
          MessagePormpt(this.langType, langObj)
          return
        }
      }
      this.$loading.show()
      const params = {
        picture: this.picture,
        content: this.desc,
        url: this.urlLink,
        address: this.urlAddress,
        email: this.emailAddress
      }
      this.$Api.Index.UserAppeal(params).then(res => {
        this.$loading.hide()
        if (res && res.code === 200) {
          let langObj = {
            zh_cn: '提交成功',
            en: 'Submitted successfully',
            ru: 'Успешно отправлено',
            zh_tw: '提交成功'
          }
          MessagePormpt(this.langType, langObj)
          this.picture = ''
        } else {
          let langObj = {
            zh_cn: '请检查填写内容',
            en: 'Please check the filled content',
            ru: 'Пожалуйста, проверьте заполненное содержимое',
            zh_tw: '請核對填寫內容'
          }
          MessagePormpt(this.langType, langObj)
        }
      })
        .catch(err => {
          this.$loading.hide()
          console.log(err, JSON.stringify(err))
        })
    }
  }
}
</script>
<style lang="less" scoped>
.appeal {
  // display: flex;
  width: 80%;
  .appealItem {
    // width: 50%;
    .itemContent {
      width: 80%;
      p {
        font-family: Inter-Bold;
      }
    }
    .itemContent_bg {
      p {
        font-family: Inter-Bold;
      }
      .itemContent_bg_img{
        width: 100%;
        height: 80px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .save {
      width: 135px;
      height: 37px;
      line-height: 37px;
    }
    .appealLink {
      width: 48%;
      .appealLinkitem {
        width: 100%;
        input {
          width: 100%;
          background: none;
        }
      }
    }
    .appealaddressandemail {
      display: flex;
      .item {
        width: 48%;
        margin-right: 2%;
      }
    }
  }
  .copyAddress{
    position: relative;
    .copyicon {
      position: absolute;
      top: 5px;
      right: -30px;
      width: 25px;
      height: 25px;
      img {
        width: 100%;
      }
    }
  }
  .email {
    width: 100%;
    height: 37px;
    line-height: 37px;
    display: flex;
    .emailicon {
      margin: 0 5px;
      img {
        width: 25px;
        height: 25px;
      }
    }
    .emailinput {
      width: 48%;
      input {
        width: 100%;
        background: none;
      }
    }
  }
}
/deep/.el-textarea__inner {
  background: none;
  border: none;
  color: #d6d6d6;
}
/deep/.el-input__count {
  background: none;
}
</style>
